import { Handle, Position } from "reactflow";
import "./OutputNode.css";

interface OutputNodeProps {
  data: {
    label: string;
    config?: {
      outputType?: string;
      destination?: string;
    };
  };
  selected: boolean;
}

function OutputNode({ data, selected }: OutputNodeProps) {
  const outputType = data.config?.outputType || "未设置";

  return (
    <div className={`output-node ${selected ? "selected" : ""}`}>
      {/* 左侧输入连接点 */}
      <Handle
        type="target"
        position={Position.Left}
        id="target-left"
        className="handle-left"
      />

      <div className="output-node-content">
        <div className="output-node-label">{data.label}</div>

        <div className="output-node-details">
          <div className="output-node-detail">
            <span className="output-node-detail-label">类型:</span>
            <span>{outputType}</span>
          </div>

          {data.config?.destination && (
            <div className="output-node-detail">
              <span className="output-node-detail-label">目标:</span>
              <span>
                {data.config.destination.substring(0, 15)}
                {data.config.destination.length > 15 ? "..." : ""}
              </span>
            </div>
          )}
        </div>
      </div>

      {/* 右侧输出连接点 */}
      <Handle
        type="source"
        position={Position.Right}
        id="source-right"
        className="handle-right"
      />
    </div>
  );
}

export default OutputNode;
